import { Row } from "antd";
import { toJS } from 'mobx';
import defaultData from "./data";
import Props from "../base/Props";
import AddressStore from "./Store";
import { observer } from 'mobx-react';
import { WeaCheckbox, WeaSelect, WeaInput, WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
class AddressProps extends Props {
  constructor(props) {
    super();

    this.store = props.store;
  }

  componentDidMount() {
    const { data } = this.props;

    this.store.init(data);
  }

  handleDefaultValChange(key, property) {
    return value => {
      const { data } = this.props;
      const obj = data[key];
      const newObj = { ...obj };
      const isValueChange = property === 'value';

      newObj[property] = value;

      this.store.onDefaultValueChange(key, property, value);

      // 出现错误不改变值
      if(this.store.errors.length && (!isValueChange || (isValueChange && '' === value))) return;

      this.props.onChange(key, newObj);

      if(isValueChange) {
        const { province, provinceRequired } = this.store;

        // 更新相关联动的值
        switch(key) {
          case 'province':
            this.props.onChange('province', { ...data.province, value: province, required: provinceRequired });
            this.props.onChange('city', { ...data.city, value: '' });
          case 'city':
            this.props.onChange('district', { ...data.district, value: '' });
        }
      } else {
        // 更新出错未更新的值
        ['province', 'city', 'district'].forEach(type => {
          if(key === type) return;

          this.props.onChange(type, { ...data[type], required: this.store[`${type}Required`] });
        });
      }
    };
  }

  renderDefaultValue() {
    const {
      errors,
      province, city, district, detail,
      provinceRequired, cityRequired, districtRequired, detailRequired,
      provinceOpts, cityOpts, districtOpts
    } = this.store;
    const errorTip = errors.find(Boolean);

    return (
      <Row>
        <label>{getLabel('502451', '默认值')}</label>
        <div className='wea-edc-form-group wea-edc-offset-2'>
          <WeaCheckbox
            id='province'
            value={provinceRequired}
            onChange={this.handleDefaultValChange('province', 'required')}
          />
          <WeaSelect
            value={province}
            options={toJS(provinceOpts)}
            onChange={this.handleDefaultValChange('province', 'value')}
          />
        </div>
        <div className='wea-edc-form-group wea-edc-offset-2'>
          <WeaCheckbox
            id='city'
            value={cityRequired}
            onChange={this.handleDefaultValChange('city', 'required')}
          />
          <WeaSelect
            value={city}
            options={toJS(cityOpts)}
            onChange={this.handleDefaultValChange('city', 'value')}
          />
        </div>
        <div className='wea-edc-form-group wea-edc-offset-2'>
          <WeaCheckbox
            id='district'
            value={districtRequired}
            onChange={this.handleDefaultValChange('district', 'required')}
          />
          <WeaSelect
            value={district}
            options={toJS(districtOpts)}
            onChange={this.handleDefaultValChange('district', 'value')}
          />
        </div>
        <div className='wea-edc-form-group wea-edc-offset-2'>
          <WeaCheckbox
            id='detail'
            value={detailRequired}
            onChange={this.handleDefaultValChange('detail', 'required')}
          />
          <WeaInput
            value={detail}
            placeholder={getLabel('502450', '详细地址')}
            onChange={this.handleDefaultValChange('detail', 'value')}
          />
          {errorTip && <p className='wea-edc-error'>{errorTip}</p>}
        </div>
      </Row>
    );
  }
}

AddressProps.defaultProps = {
  data: defaultData,
  onChange: () => { }
};

export default props => <AddressProps store={new AddressStore()} {...props} />